<template>
	<div class="board">
		<div class="board-header">
      <router-link class="board-title" :to="'/search?keyWord=' + products.class_name + '&id='+ products.class_id" tag="div">{{ products.class_name }}</router-link>
			<router-link class="board-more" :to="'/search?keyWord=' + products.class_name + '&id='+ products.class_id" tag="div">{{$t('message.more')}}</router-link>
    </div>
		<div class="board-container">
			<div class="board-promotion">
				<a :href="products.goods_class_adv.href_url" target="_blank"><img v-lazy="products.goods_class_adv.img_url" :alt="products.goods_class_adv.name" :title="products.goods_class_adv.name" imgtype='aside'/></a>
			</div>
			<div class="board-product-list">
				<ul>
          <li v-for="(item, index) in products.goods_list" :key="index" :class="{ 'board-no-top': index <= 3 }">
						<v-product-item :product="item"></v-product-item>
					</li>
				</ul>
			</div>
		</div>
		<div class="board-footer" v-if="products.foot_banner && products.foot_banner.src !== ''">
			<a :href="products.foot_banner.href" target="_blank">
				<img :src="products.foot_banner.src" alt="">
			</a>
		</div>
	</div>
</template>

<script>
import VProductItem from '@/components/base/VProductItem'

export default {
  name: 'IndexBoard',
  props: {
    products: {
      type: Object,
      required: true
    }
  },
  components: {
    VProductItem
  }
}
</script>

<style scoped>
.board {
	width: 1200px;
}

.board-header {
	height: 30px;
	overflow: hidden;
}

.board-title {
	float: left;
	width: 170px;
	height: 30px;
	line-height: 30px;
	font-size: 22px;
	font-weight: bold;
	padding-left: 22px;
	position: relative;
  cursor: pointer;
}

.board-title:before {
	content: '';
	width: 5px;
	height: 22px;
	background-color: #ff600a;
	position: absolute;
	top: 4px;
	left: 0;
}

.board-more {
	float: right;
	height: 20px;
	line-height: 20px;
	font-size: 16px;
	color: #676767;
	padding-right: 22px;
	margin-top: 10px;
	background: url(../../assets/images/index/icon_more.png) no-repeat right center;
	cursor: pointer;
}

.board-container {
	width: 1200px;
	height: 610px;
	margin-top: 18px;
}

.board-container:after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	clear: both;
	visibility: hidden;
}

.board-footer {
	width: 1200px;
	margin-top: 19px;
}

.board-footer img {
	width: 1200px;
	height: 120px;
}

.board-promotion {
	width: 232px;
	height: 610px;
	float: left;
}

.board-promotion img {
	width: 100%;
	height: 100%;
}

.board-product-list {
	float: left;
	width: 968px;
	height: 610px;
	/* background-color: #fff; */
	position: relative;
}

.board-product-list ul {
	/* overflow: hidden; */
}

.board-product-list li {
	display: inline-block;
	width: 232px;
	height: 305px;
	padding: 16px 16px 0 16px;
	box-sizing: border-box;
	background-color: #fff;
	margin-left: 10px;
  margin-top: 10px;
	/* position: relative; */
	transition: all .3s
}

.board-product-list li:hover {
	transform: translateY(-4px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
}

.board-product-list .board-no-top {
  margin-top: 0;
}
</style>
